<html>

<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>志愿者认证申请</title>
    <meta name="viewport" content="initial-scale=1, maximum-scale=1">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/sm-extend.css">
    <link rel="stylesheet" type="text/css" href="${staticpath}/front/dist/css/base.css">
    <link rel="stylesheet" href="//at.alicdn.com/t/font_4cu73hwimwr35wmi.css"/>

    <style>
        .information-card{margin-top:0;}
        .information-card .list-block,.img-card .list-block{border-bottom: 2px solid #eee;}
        .information-card .item-inner .item-title,.img-card .item-title,.sex-card .item-title,.identity-card .item-content .item-title{font-size: 16px;!important; }
        .information-card .item-inner .item-after ,.sex-card .item-after,.identity-card .item-content .item-input input{font-size: 14px;!important; }
        .information-card .item-inner{padding: 10px 0 10px 15px; }
        .img-card .item-inner img{width: 40px;height:40px;}
        .sex-card  .item-inner{margin-left: 0!important;}
        .img-card .item-inner{padding-right: 0!important;margin-left: 0!important; min-height: 70px!important;height: 70px!important; }
        .bar-tab{line-height: 45px;height: 45px;}
        #tool-bar a{width: 50%;float: left;line-height: 45px;height: 45px;}
        #confirmBtn{background-color: #00b0ec;color: #ffffff;}
        .mr0{margin-right: 0!important;}
        #cancelBtn{background-color:#ffffff; color: #3d4145;}
        .actions-modal-label{line-height: 35px;min-height:35px;border-bottom:none;}
        .actions-modal-group:last-child .actions-modal-button {background-color:#ffffff; color: #3d4145;}
        .picker-columns {height: 200px;}
        .bar .button-link{font-size: 16px;padding-right: 10px; line-height: 45px;height:45px;}
        .item-content{border-bottom: 1px solid #dadada;}
        .list-block .item-inner:after{  display: none;}
        .picker-calendar-month-picker a.icon-only, .picker-calendar-year-picker a.icon-only{padding-top: 15px;}
        .picker-modal .bar-nav { background-color: #FFFFFF;}
        .icon-xiangyou{color:#ccc;}
        #confirm-select{background: #00b0ec;color: #fff;}
        input[type=checkbox]{margin-right: 5px;}
    </style>
</head>

<body>
<div class="page-group">
    <div class="page page-current" id="pageOne">
        <!--头部部分 !-->
        <header class="bar bar-nav">
            <a class="icon icon-left pull-left back" href="${basepath}/front/account/toAccountList">返回</a>
            <h1 class="title">认证申请</h1>
        </header>
        <div class="content account-content">
            <div class="information-card card">
            </div>

            <div class="card sex-card">
                <div class="card-content">
                    <div class="list-block">
                        <ul>
                            <li>
                                <a href="#" class="item-link item-content" id="sexBtn">
                                    <div class="item-inner">
                                        <div class="item-title">性别</div>
                                        <div class="item-after sex mr0" >男</div>
                                    </div>
                                  </a>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="card sex-card">
                <div class="card-content">
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">身份证</div>
                            <div class="item-input">
                                <input type="number" placeholder="请输入身份证号" id='idCard'>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="area-card card">
                <div class="card-content">
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">现居住地</div>
                            <div class="item-input">
                                <input type="text" placeholder="请选择所在地区" id='city-picker' readonly>
                            </div>
                        </div>
                    </div>
                    <div class="list-block">
                        <a class="item-content" href="#pageThree">
                            <div class="item-title label">最高学历</div>
                            <div class="item-input">
                                <input type="text" readonly class="education"/>
                            </div>
                            <span class="iconfont icon-xiangyou pull-right"></span>
                        </a>
                    </div>
                    <div class="list-block">
                        <a class="item-content" href="#pageFour">
                            <div class="item-title label">政治面貌</div>
                            <div class="item-input">
                                <input type="text" readonly class="political "/>
                            </div>
                            <span class="iconfont icon-xiangyou pull-right"></span>
                        </a>
                    </div>
                    <div class="list-block">
                        <a class="item-content to-area" href="#pageTwo">
                            <div class="item-title label ">意向领域</div>
                            <div class="item-input">
                                <input type="text" readonly class="area-text"/>
                            </div>
                            <span class="iconfont icon-xiangyou pull-right"></span>
                        </a>
                    </div>
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">服务地区</div>
                            <div class="item-input">
                                <input type="text" placeholder="意向服务地区" id='city-picker2' readonly>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="identity-card card">
                <div class="card-content">
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">QQ号</div>
                            <div class="item-input">
                                <input type="number"  placeholder="选填" id="QQ" >
                            </div>
                        </div>
                    </div>
                    <div class="list-block">
                        <div class="item-content">
                            <div class="item-title label">微信</div>
                            <div class="item-input">
                                <input type="number"  placeholder="选填" id="WX" >
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <nav class="bar bar-tab organize-bar-tab" id="tool-bar">
            <a href="${basepath}/front/account/toAccountList" class="tab-item" id="cancelBtn">取消</a>
            <a href="#" class="tab-item" id="confirmBtn" data-url="${basepath}/front/account/toAccountList">确认</a>
        </nav>
    </div>
<#--服务领域选择页面-->
    <div class="page" id="pageTwo">
        <header class="bar bar-nav">
            <h1 class="title">服务领域</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <ul class="check-list">
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a1" data-id="1" /><label for="a1">扶贫济困</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a2" data-id="2" /><label for="a2">助老助残</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a3" data-id="3"/><label for="a3">社区服务</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a4" data-id="4" /><label for="a4">生态建设</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a5" data-id="5" /><label for="a5">大型活动</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a6" data-id="6" /><label for="a6">抢险救灾</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a7" data-id="7" /><label for="a7">网络文明</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a8" data-id="8" /><label for="a8">社会管理</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a9" data-id="9" /><label for="a9">文化建设</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a10" data-id="10" /><label for="a10">西部开发</label></div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title"><input type="checkbox" id="a11" data-id="11"/><label for="a11">海外服务</label></div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="bar bar-tab">
            <a class="tab-item " id="confirm-select" data-url="${basepath}/front/account/toAccountList">
                确定
            </a>
        </div>
    </div>
    <#--学历-->
    <div class="page" id="pageThree">
        <header class="bar bar-nav">
            <h1 class="title">学历选择</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <ul class="education-list">
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">博士以上</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">博士</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">研究生</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">本科</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">大专</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">中专</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">高中</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">初中</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">小学</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
<#--政治面貌-->
    <div class="page" id="pageFour">
        <header class="bar bar-nav">
            <h1 class="title">政治面貌</h1>
        </header>
        <div class="content">
            <div class="list-block">
                <ul class="political-list">
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">团员</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">预备党员</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">党员</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">党员(保留团籍)</div>
                        </div>
                    </li>
                    <li class="item-content">
                        <div class="item-inner">
                            <div class="item-title">其他</div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</div>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/zepto.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-extend.js' charset='utf-8'></script>
<script  type='text/javascript' src='${staticpath}/front/dist/js/lib/sm-city-picker.js' charset='utf-8'></script>
<script type='text/javascript' src='${staticpath}/front/dist/js/accountEdit.js' charset='utf-8'></script>

</body>

</html>
